<template>
  <div class="censusArea">
    <div class="box-left">
      <region-tree @selected="areaSelectedHandler" :is-edit-tree="true" :key="'1'"  @addRelation="areaAddRelationHandler"/>
    </div>
    <div class="box-right">
      <county-map map-width="100%" map-height="100vh" :vectorId="this.vector" @polygonLoaded="polygonLoadedHandler" :position="position" ref="contyMap">
        <template #search>
          <div class="boundary-right">
            <div id="search-container">
              <el-input suffix-icon="el-icon-search" v-model="searchName" clearable
              @keyup.enter="searchAddressHandler"
              @input="debouncedHandleSearch"></el-input>
            </div>
            <ul  v-if="suggestions" id="suggestions-list" style="z-index: 10000;background-color: aliceblue;">
                <li v-for="(item, index) of suggestions" :key="index" @click="selectPlace(item)">
                    {{ item.name }}
                </li>
            </ul>
            <place-card ref="placeCard" style="width: 0px; height: 0px;display: none;"></place-card>
            <el-button type="primary" icon="el-icon-plus" size="mini" style="margin-top: 10px;" plain @click="handleSuccess"
                v-permission="'system:area:edit'">操作完成</el-button>
            <el-button type="primary" icon="el-icon-plus" size="mini" style="margin-top: 10px;" plain @click="handleBack"
                v-permission="'system:area:edit'">区划还原</el-button>
          </div>
        </template>
      </county-map>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue,Ref} from 'vue-property-decorator';
import RegionTree from "@/views/region/components/RegionTree.vue";
import BoundaryCard from "@/views/region/components/BoundaryCard.vue";
import PlaceCard from "@/views/region/components/PlaceCard.vue";
import CountyMap from "@/components/CountyMap.vue";
import {updateVector,backVector} from '@/api/areaManager';
import {baiduSearch} from '@/api/dataSearch';
import _ from 'lodash';

@Component({
  components: {CountyMap, RegionTree, BoundaryCard,PlaceCard}
})
export default class censusArea extends Vue {

  @Ref('contyMap') contyMap;

  @Ref('placeCard') placeCard;
  vector:any=null;
  position:any = null;
  searchName='学校';
  areaModel!:any;
  suggestions:any = null;
  debouncedHandleSearch:any;
  areaSelectedHandler(model){
    
    this.vector =null;
    if( this.contyMap){
      this.contyMap.clearModify();
    }

    this.vector = model.areaData.vectorId;
    this.position = model.areaData.position;
    this.areaModel = model;
  
  }

  selectPlace(item:any){

    this.position = [item.location.lng,item.location.lat];
  }
  handleSuccess(){
    this.contyMap.saveModify();

    setTimeout(() => {
      const vectorId =this.contyMap.getGeoFile();
      if(!vectorId){
        this.$message.info("目前没有区划调整信息");
        return;
      }
      updateVector({'id':this.areaModel.areaId,'workId':this.areaModel.workId,'vectorId':vectorId}).then(res =>{
         if(res && res.data){
            this.contyMap.clearModify();
            this.$message.success("区划拆分已保存");
            this.vector = vectorId;
            this.areaModel.vectorId = vectorId;
            (this as any).$bus.$emit('workAreaUpdate','ok');
         }
      }).catch(e =>{
        this.$message.error("区划拆分保存失败");
        (this as any).$bus.$emit('workAreaUpdate','ok');
      })
    }, 500);
  }


  handleBack(){
    backVector({'id':this.areaModel.areaId,'workId':this.areaModel.workId}).then(res =>{
         if(res && res.data){
            this.contyMap.clearModify();
            this.$message.success("区划还原成功");
            (this as any).$bus.$emit('workAreaUpdate','ok');
         }
      }).catch(e =>{
        this.$message.error("区划还原失败");
      })
  }

  polygonLoadedHandler(){
        this.placeCard.hoverPoint(this.contyMap.models.map);
    }

  addOrg() {
    console.log('添加子分组')
  }
  editOrg() {
    console.log('修改分组名称')
  }

  areaAddRelationHandler(val){
    this.contyMap.relationArea();
    setTimeout(() => {
      const vectorId =this.contyMap.getGeoFile();
      updateVector({'id':val,'vectorId':vectorId,'workId':this.areaModel.workId}).then(res =>{
         if(res && res.data){
            this.$message.success("区划已关联");
            (this as any).$bus.$emit('workAreaUpdate','ok');
         }
      }).catch(e =>{
        (this as any).$bus.$emit('workAreaUpdate','ok');
        this.$message.error("区划关联失败");
      })
    }, 500);
  }

  deleteOrg() {
    this.$confirm(`删除  分组、下级子分组 <br>是否继续?`, '提示', {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    }).then(ok=>{
      (this as any).$bus.$emit('workAreaUpdate','ok');
        console.log(ok)
    })
  }
  //@Watch('searchName')
  searchAddressHandler(name){
    if(this.areaModel && this.areaModel.areaId){
      baiduSearch({'name':name,'areaId':this.areaModel.areaId}).then(res =>{
        if(res && res.data && res.data.results){
          this.suggestions = res.data.results;
          this.contyMap.buildBaiduPalce(this.suggestions,this.placeCard);
        }else{
          this.suggestions = null;
        }
      }).catch(e =>{
        this.suggestions = null;

      })
  }
}

  created(){
    this.debouncedHandleSearch = _.debounce(this.searchAddressHandler, 500);
  }
  mounted(){
    (this as any).$bus.$on('areaVectorRefresh',(item:any) =>{
      if( this.contyMap){
        this.vector = null;
        this.contyMap.clearModify();
        setTimeout(()=>{
          this.vector = item.vectorId;
        })
      }
    });
  }
}

</script>
<style lang="scss" scoped>
.censusArea {
  display: flex;
  height: 100%;

  .box-left {
    height: auto;
    min-height: 100vh;
  }

  .box-right {
    flex: 1;
    position: relative;

    .boundary-right {
      position: absolute;
      top: 18px;
      left: 18px;
      z-index: 1;
    }
  }
}
.treeMenu {
    font-size: 14px;
    position: fixed;
    padding: 2px 0px 5px;
    z-index: 99999; // 为了显示再最上层
    top: 50%;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    overflow: hidden; // 溢出的部分隐藏
    border-radius: 5px; // 圆角
    border: 1px solid #e6ebf5;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    div {
        padding: 2px 10px;
        box-sizing: border-box;
        text-align: left;
    }
    div:hover {
        background-color: #eee;
        cursor: pointer;
    }
}
#search-container { margin-bottom: 10px; }
#suggestions-list { list-style: none; padding: 0; margin: 0; max-height: 200px; overflow-y: auto; border: 1px solid #ccc; }
#suggestions-list li { padding: 8px; cursor: pointer; }
#suggestions-list li:hover { background-color: #f0f0f0; }
#map-container { width: 100%; height: 500px; margin-top: 20px; }
</style>
